<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .box{width: 100px;height: 100px;background: #000;}
    </style>
</head>
<body>
    <div class="app">
       <h1 v-if="0">加加减减军军</h1>
       <button @click="handle">点击切换</button>
       <div class="box" v-if="show"></div>
    </div>
</body>
</html>
<script>
       const VM = new Vue({
        el:'.app',  
        data:{
            show:true
        },
        methods:{
            handle(){
                this.show = ! this.show
            }
        }
     
     
    })





     //v-if:是Vue框架给我们提供一个指令,它主要的作用是可以让元素进行显示或者隐藏
     //v-if指令，右侧需要一般是布尔值，真代表当前元素显示、假代表元素隐藏。
     //v-bind|v-model|v-on|v-if,右侧属性值可以VM对象的属性|JS表达式

    
     //v-if是通过何种手段实现元素的显示与隐藏?
     //显示：每一次展示都是创建一个新的DOM
     //隐藏：每一次都需要移出、干掉DOM进行隐藏。
     //由于v-if：直接操作DOM创建与销毁，频繁的操作DOM，很耗性能的。
     //拓展的知识点：最好能接受。
     //重绘：比如元素的外观，颜色、字体大小发生变化，浏览器会重新渲染，重绘，
     //重新渲染，将整个DOM数重新渲染一遍。
     //重排:当网页的布局发生变化的时候，浏览器会重排，将整个DOM属性从新渲染，很耗性能的。
    
</script>



